<!--
 * @Author: 华芊芊 huaqianqian@yeah.net
 * @Date: 2023-11-03 11:09:27
 * @LastEditors: 华芊芊 huaqianqian@yeah.net
 * @LastEditTime: 2023-12-01 09:25:46
 * @FilePath: \zmglpt-ui-screen\src\components\timePicker\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="timebg-box">
    <div class="timebg" style="width: 340px">
      <el-date-picker
        v-if="pickTime.length"
        size="small"
        v-model="pickTime"
        type="daterange"
        range-separator="-"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        format="yyyy年MM月dd日"
        value-format="yyyy年MM月dd日"
      >
      </el-date-picker>
      <!-- <el-checkbox v-model="checked"></el-checkbox> -->
    </div>
  </div>
</template>

<script>
export default {
  name: "TimerPicker",

  data() {
    return {
      pickTime: [],
      // checked: false,
    };
  },
  created() {
    this.getNowDate();
  },
  watch: {
    // checked: {
    //   handler(newVal, oldVal) {
    //     // 选择多选框 所有页面一个时间
    //     if (newVal) {
    //       sessionStorage.setItem("PICKTIME", JSON.stringify(this.pickTime));
    //     } else {
    //       sessionStorage.setItem("PICKTIME", null);
    //     }
    //   },
    // },
    pickTime: {
      handler(newVal, oldVal) {
        // debugger
        let startDate = newVal[0];
        let startYear = startDate.substring(0,4);
        let startMonth = startDate.substring(5,7);
        let startDay = startDate.substring(8,10);
        let endDate = newVal[1];
        let endYear = endDate.substring(0,4);
        let endMonth = endDate.substring(5,7);
        let endDay = endDate.substring(8,10);
        console.log(newVal, "----PICKTIME");
        //let year = new Date().getFullYear();
        // let year = newVal[1];
        // let month = newVal[1].split("")[5] + newVal[1].split("")[6];
        // let day = newVal[1].split("")[8] + newVal[1].split("")[9];
        let timeObj = {
          startDate: `${startYear}-${startMonth}-${startDay}`,
          endDate: `${endYear}-${endMonth}-${endDay}`,
          lastStartDate: `${startYear-1}-${startMonth}-${startDay}`,
          lastEndDate: `${endYear-1}-${endMonth}-${endDay}`,
        };
        // sessionStorage.setItem("PICKTIME", JSON.stringify(timeObj));

        this.$emit("timeChange", timeObj);
      },
    },
  },
  mounted() {},

  methods: {
    getNowDate() {
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      month = month>9?month:"0"+month;
      let day = date.getDate() > 9 ? date.getDate() : "0" + date.getDate();
      // let times = JSON.parse(sessionStorage.getItem("PICKTIME"));
      // if(times) this.checked = true
      this.pickTime = [
        year + "年01月01日",
        year + "年" + month + "月" + day + "日",
      ];
    },
  },
};
</script>

<style lang="scss" >
.timebg-box {
  display: flex;
  justify-content: end;
  position: absolute;
  top: 24px;
  left: 0;
  .timebg {
    display: flex;
    align-items: end;
  }
}
.el-range-editor--small.el-input__inner {
  margin-right: 10px;
}
.el-picker-panel__icon-btn {
  margin-right: 10px !important;
}
</style>